<template>
  <DetailHeader />
  <StatisticsSearch class="search_box" :options="statisOptions" @submit="onSubmit" />

  <Quantity ref="QuantityRef" />
  <Statistics ref="StatisticsRef" />
</template>

<script setup lang="ts">
  import { nextTick, onMounted, reactive, ref } from 'vue'
  import { getStatis } from '@/api/smartMarketing/order'
  import { useRoute } from 'vue-router'
  import { getDay, DFormat } from '@/utils/utils'
  import DetailHeader from '../components/DetailHeader.vue'
  import Quantity from './components/Quantity.vue'
  import Statistics from './components/Statistics.vue'
  import StatisticsSearch from '@/components/zw/statistics-search/StatisticsSearch.vue'

  const QuantityRef: any = ref(null)
  const StatisticsRef: any = ref(null)
  const route = useRoute()
  const defaultParams = ref({
    create_at: [getDay(-6), getDay(0, true)] //创建时间
  })

  const statisOptions = reactive([
    {
      label: '时间筛选',
      type: 'dateFilter',
    },
  ])

  const onSubmit = (data:any) => {
    nextTick(() => {
      if(data.times) {
        getData({create_at: data.times || []})
      }
    })
  }

  const getData = async (v: any) => {
    if (v && v.create_at) defaultParams.value = { ...v }
    const params = {
      activity_id: route.query.id,
      ...defaultParams.value
    }
    console.log(params.create_at, '查询参数')
    const res = await getStatis(params)
    let chartData = {
      statis_num_list: {
        date: [],
        red_num: []
      },
      statis_amount_list: {
        date: [],
        red_num: []
      }
    }
    console.log(res, '图表数据-折线图')
    // 红包个数
    res.statis_num_list.forEach((item) => {
      chartData.statis_num_list.date.push(item.date)
      chartData.statis_num_list.red_num.push(item.red_num)
    })
    // 红包金额
    res.statis_amount_list.forEach((item) => {
      chartData.statis_amount_list.date.push(item.date)
      chartData.statis_amount_list.red_num.push(item.red_amount)
    })
    StatisticsRef.value.getEchartData(chartData)
    QuantityRef.value.getState(res)
  }
  onMounted(() => {
    getData({})
  })
</script>

<style lang="scss" scoped>
.search_box {
  margin-bottom: 15px;
}
</style>
